<script>
import ImageAvater from "../pageComponents/imageAvater.vue";

export default {
  name: "second_popup",
  components: {ImageAvater},
  data() {
    return {
      info: {
        name: '张三',
        code: '56789',
        birthday: '1997-10-22',
        constellation: '天蝎座',
        householdRegistration: '河南',
        occupational: '交警'
      }
    }
  },
  methods: {
    openPopup(obj) {
      this.$refs.second_popup.open()
    },
    closePopup(){
      this.$refs.second_popup.close()
    }
  },
}
</script>

<template>
  <uni-popup ref="second_popup" :mask-click="false">
    <view class="second_popup">
      <view class="second_popup_header row items-center">
        <text class="second_popup_header_text ml-41">查看信息</text>
        <image class="first_popup_header_image" src="/static/shiqin-images/popupClose.png" mode="widthFix"
               @click="closePopup"></image>
      </view>
      <view class="second_popup_content allColumnCenter">
        <view class="second_popup_content_name">
          <text class="second_popup_content_name_text">{{ info.name }}</text>
        </view>
        <view class="second_popup_content_code">
          <text class="second_popup_content_code_text">拾亲号：{{ info.code }}</text>
        </view>
        <view class="second_popup_content_avatar">
          <image-avater :width="165" :height="165" is-order :borderWidth="8" borderColor="#FFFFFF"></image-avater>
        </view>
        <view class="second_popup_content_gap row items-center mt-35">
          <text class="second_popup_content_gap_title ml-28">生日</text>
          <text class="second_popup_content_gap_content ml-35">{{ info.birthday }}</text>
        </view>
        <view class="second_popup_content_gap row items-center mt-35">
          <text class="second_popup_content_gap_title ml-28">星座</text>
          <text class="second_popup_content_gap_content ml-35">{{ info.constellation }}</text>
        </view>
        <view class="second_popup_content_gap row items-center mt-35">
          <text class="second_popup_content_gap_title ml-28">户籍</text>
          <text class="second_popup_content_gap_content ml-35">{{ info.householdRegistration }}</text>
        </view>
        <view class="second_popup_content_gap row items-center mt-35">
          <text class="second_popup_content_gap_title ml-28">职业</text>
          <text class="second_popup_content_gap_content ml-35">{{ info.occupational }}</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.second_popup {
  width: 552rpx;
  height: 725rpx;
  background: linear-gradient(180deg, #C5C1F7 0%, #EEE9FA 100%);
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  overflow: hidden;

  .second_popup_header {
    width: 552rpx;
    height: 80rpx;
    background: #A7A1F2;
    border-radius: 15rpx 15rpx 0rpx 0rpx;
    position: relative;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 38rpx;
      color: #FFFFFF;
    }

    .first_popup_header_image {
      position: absolute;
      width: 65rpx;
      height: 65rpx;
      right: 22rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .second_popup_content {
    margin: 0 41rpx;
    position: relative;

    .second_popup_content_name {
      width: 470rpx;

      .second_popup_content_name_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 50rpx;
        color: #FFFFFF;
      }
    }

    .second_popup_content_code {
      width: 470rpx;

      .second_popup_content_code_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
      }
    }

    .second_popup_content_avatar {
      position: absolute;
      right: 25rpx;
      top: -35rpx;
    }

    .second_popup_content_gap {
      width: 470rpx;
      height: 80rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      .second_popup_content_gap_title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #4B4B4B;
      }
      .second_popup_content_gap_content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #9F9F9F;
      }
    }
  }
}
</style>